<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <header>Header</header>
  <nav>Nav</nav>
  <aside>Sidebar</aside>
  <main>Main</main>
  <section>Ads</section>
  <footer>Footer</footer>
</div>
</template>

<style scoped lang="scss">

.wrap {
  display: grid;
  gap: 20px;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "ads"
    "footer";

  width: 90vw;
  min-height: 90vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #f7f7f7;
  color: #fff;

  & > * {
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
  }
  header {
    grid-area: header;
    background-color: #0094ff;
  }

  nav {
    grid-area: nav;
    background-color: #555674;
  }

  aside {
    grid-area: sidebar;
    background-color: #834796;
  }

  main {
    grid-area: main;
    background-color: #cfd9e3;
    color: #000;
  }

  section {
    grid-area: ads;
    background-color: #23c2e3;
  }

  footer {
    grid-area: footer;
    background-color: #332827;
  }

}
/* 平板端 Tablet */
@media only screen and (min-width: 768px) {
  .wrap {
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: minmax(min-content, 220px) 1fr;
    grid-template-areas:
      "header   header"
      "nav      nav"
      "sidebar  main"
      "ads      footer";
  }
}

/* 桌面端 Desktop */
@media only screen and (min-width: 1024px) {
  .wrap {
    grid-template-columns: minmax(min-content, 220px) 1fr minmax(
        min-content,
            220px
      );
    grid-template-areas:
      "header   header  header"
      "sidebar  nav     ads"
      "sidebar  main    ads"
      "footer   footer  footer";
  }
}
</style>
